<!--
 * @Description: 业务建模-质量建模
 * @Autor: 曹敬涛
 * @Date: 2021-08-04 15:45:18
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-24 10:25:56
-->
<div class="suppliess">

  <div style="padding: 15px;">
    <div class="col-lg-12">
      <div class="m-portlet m-portlet--mobile">
        <div class="row align-items-center" style="width: 100%;padding-top: 20px;">
          <div class="primeng-datatable-container" style="margin-left: 5px;">
            <div class="col-md-12" style=" float: left; width: 100%">

              <div style="margin-top: 10px;">
                <p-button label="新增不良严重度等级" (click)="display=true"></p-button>

              </div>
              <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
                <p-table #dataTable [value]="primengTableHelper.records"
                  rows="{{primengTableHelper.defaultRecordsCountPerPage}}" (onLazyLoad)="getSeverityList($event)"
                  [paginator]="false" [lazy]="true" [scrollable]="true" [responsive]="primengTableHelper.isResponsive"
                  [resizableColumns]="primengTableHelper.resizableColumns">
                  <ng-template pTemplate="header">
                    <tr>
                      <th style="width: 50px">序号</th>
                      <th style="width: 150px">不良严重度等级名称</th>
                      <th style="width: 150px">不良严重度等级定义</th>
                      <th style="width: 150px">问题抄送角色</th>
                      <th style="width: 150px">是否使用</th>
                      <th style="width: 100px">操作</th>
                    </tr>
                  </ng-template>
                  <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                    <tr>
                      <td style="width: 50px">{{rowIndex+1}}</td>
                      <td style="width: 150px">{{record.severityName}}</td>
                      <td style="width: 150px">{{record.severityDesc}}</td>
                      <td style="width: 150px">{{record.ccRole}}</td>
                      <td style="width: 150px">{{record.isUsed === 1?'是':'否'}}</td>
                      <td style="width: 100px">
                        <div class="btn-group dropdown" dropdown container="body">
                          <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                            <i class="fa fa-cog"></i><span class="caret"></span> 操作
                          </button>
                          <ul class="dropdown-menu" *dropdownMenu>
                            <li>
                              <a href="javascript:;" (click)="updateDataTable(rowIndex)">修改</a>
                            </li>
                            <li>
                              <a href="javascript:;" (click)="deleteEv(record.id,'deleteQualitySeverityDesc')">删除</a>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                  </ng-template>
                </p-table>
                <div class="primeng-paging-container">
                  <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                    [totalRecords]="primengTableHelper.totalRecordsCount" (onPageChange)="getSeverityList($event)"
                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                  </p-paginator>
                  <span class="total-records-count">
                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div style="display: flex;padding: 15px;">
    <div class="col-lg-6">
      <div class="m-portlet m-portlet--mobile">
        <div>

          <p-button label="新增一级不良" (onClick)="parentDia = true"></p-button>
        </div>
        <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
          <p-table #typeData [value]="primengTypeTableHelper.records" (onLazyLoad)="getDescList($event)"
            rows="{{primengTypeTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
            [scrollable]="true" [responsive]="primengTypeTableHelper.isResponsive"
            [resizableColumns]="primengTypeTableHelper.resizableColumns">
            <ng-template pTemplate="header">
              <tr>
                <th style="width: 50px">序号</th>
                <th style="width: 150px">一级不良</th>
                <th style="width: 150px">创建时间</th>
                <th style="width: 150px">是否使用</th>
                <th style="width: 100px">操作</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
              <tr style="cursor: pointer;" (click)="changeChild(rowIndex)">
                <td style="width: 50px">{{rowIndex+1}}</td>
                <td style="width: 150px">{{record.typeName}}</td>
                <td style="width: 150px">{{record.creationTime |date:'yyyy-MM-dd'}}</td>
                <td style="width: 150px">{{record.isUsed === 1?'是':'否'}}</td>
                <td style="width: 100px">
                  <div class="btn-group dropdown" dropdown container="body">
                    <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                      <i class="fa fa-cog"></i><span class="caret"></span> 操作
                    </button>
                    <ul class="dropdown-menu" *dropdownMenu>
                      <li>
                        <a href="javascript:;" (click)="updateLevelTable(rowIndex)">修改</a>
                      </li>
                      <li>
                        <a href="javascript:;" (click)="deleteEv(record.id,'deleteQualityTypeDesc')">删除</a>

                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
            </ng-template>
          </p-table>
          <div class="primeng-paging-container">
            <p-paginator [rows]="primengTypeTableHelper.defaultRecordsCountPerPage" #typePaginator
              [totalRecords]="primengTypeTableHelper.totalRecordsCount" (onPageChange)="getDescList($event)"
              [rowsPerPageOptions]="primengTypeTableHelper.predefinedRecordsCountPerPage">
            </p-paginator>
            <span class="total-records-count">
              {{'TotalRecordsCount' | localize:primengTypeTableHelper.totalRecordsCount}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="m-portlet m-portlet--mobile">
        <div>

          <p-button label="新增二级不良" (onClick)="childDia = true"></p-button>
        </div>

        <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
          <p-table #sonData [value]="primengSonTableHelper.records"
            rows="{{primengSonTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
            [scrollable]="true" [responsive]="primengSonTableHelper.isResponsive"
            [resizableColumns]="primengSonTableHelper.resizableColumns">
            <ng-template pTemplate="header">
              <tr>
                <!-- <th style="width: 50px">
                                  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                              </th>
                               -->
                <th style="width: 50px">序号</th>
                <th style="width: 150px">二级不良</th>
                <th style="width: 150px">创建日期</th>
                <th style="width: 150px">是否使用</th>
                <th style="width: 100px">操作</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
              <tr>
                <td style="width: 50px">{{rowIndex+1}}</td>
                <td style="width: 150px">{{record.itemName}}</td>
                <td style="width: 150px">{{record.creationTime |date:'yyyy-MM-dd'}}</td>
                <td style="width: 150px">{{record.isUsed === 1?'是':'否'}}</td>
                <td style="width: 100px">
                  <div class="btn-group dropdown" dropdown container="body">
                    <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                      <i class="fa fa-cog"></i><span class="caret"></span> 操作
                    </button>
                    <ul class="dropdown-menu" *dropdownMenu>
                      <li>
                        <a href="javascript:;" (click)="updateChildTable(rowIndex)">修改</a>
                      </li>
                      <li>
                        <a href="javascript:;" (click)="deleteEv(record.id,'deleteQualityItemInfo')">删除</a>

                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
            </ng-template>
          </p-table>
          <div class="primeng-paging-container">
            <p-paginator [rows]="primengSonTableHelper.defaultRecordsCountPerPage" #sonPaginator
              [totalRecords]="primengSonTableHelper.totalRecordsCount" (onPageChange)="getInfoList(pid,$event)"
              [rowsPerPageOptions]="primengSonTableHelper.predefinedRecordsCountPerPage">
            </p-paginator>
            <span class="total-records-count">
              {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
            </span>
          </div>
        </div>
      </div>

    </div>
  </div>
  <p-dialog header="新增不良严重等级" [(visible)]="display" (onHide)="displayclose()" modal="modal" [responsive]="true"
    [style]="{width: '40%', height: '50%'}">
    <form #displayForm="ngForm" class="business-dept" novalidate autocomplete="off" (ngSubmit)="addSeverityDesc()">
      <div class="p-formgroup-inline">
        <div class="form-group">
          <label class="label-width" for="stageSign">*不良严重等级名称：</label>
          <input id="stageSign" #stageSignInput="ngModel" name="stageSign" class="input-lable"
            [(ngModel)]="ngDisplayForm.severityName" required />
          <validation-messages [formCtrl]="stageSignInput"></validation-messages>
        </div>
        <div class="form-group " style="display: flex;">
          <label class="label-width" for="repairPartSelect">*问题抄送角色：</label>
          <p-multiSelect [options]="unitsList" id="repairPartSelect" filter="filter" optionLabel="displayName"
            dataKey="id" name="ccRole" #ccRoleSelect="ngModel" required [(ngModel)]="ccRole" 
            [itemSize]="34" defaultLabel="请选择"></p-multiSelect>
          <validation-messages [formCtrl]="ccRoleSelect"></validation-messages>
        </div>

        <div class="form-group">
          <label class="label-width" for="severityDesc">*不良严重等级定义：</label>

          <input id="severityDesc" #severityDescInput="ngModel" name="severityDesc" class="input-lable"
            [(ngModel)]="ngDisplayForm.severityDesc" required />
          <validation-messages [formCtrl]="severityDescInput"></validation-messages>
        </div>
        <div class="form-group">
          <label class="label-width" for="isUsed">是否使用：</label>
          <p-inputSwitch name="checked" #checkedInput="ngModel" [(ngModel)]="ngDisplayForm.isUsed">
          </p-inputSwitch>

        </div>

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" [disabled]="!displayForm.form.valid" [buttonBusy]="saving"
          [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>保存</span></button>
      </div>
    </form>
  </p-dialog>
  <p-dialog header="一级不良" [(visible)]="parentDia" (onHide)="displayclose()" modal="modal" [responsive]="true">

    <form #parentDiaForm="ngForm" autocomplete="off" novalidate class="business-dept" (ngSubmit)="addLevelDesc()">
      <div class="p-formgroup-inline">
        <div class="p-formgroup-inline">
          <div class="form-group">
            <label class="label-width" for="stageSign">*一级不良名称：</label>
            <input id="stageSign" #parentDiaInput="ngModel" name="parentDia" class="input-lable"
              [(ngModel)]="ngparentForm.typeName" required />
            <validation-messages [formCtrl]="parentDiaInput"></validation-messages>
          </div>
          <div class="form-group">
            <label class="label-width" for="isUsed">是否使用：</label>
            <p-inputSwitch name="parentChecked" #parentCheckedInput="ngModel" [(ngModel)]="ngparentForm.isUsed">
            </p-inputSwitch>

          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" [disabled]="!parentDiaForm.form.valid"
          [buttonBusy]="savingNgParentDia" [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
          <span>保存</span></button>
      </div>
    </form>
  </p-dialog>
  <p-dialog header="二级不良" [(visible)]="childDia" (onHide)="displayclose()" modal="modal" [responsive]="true">
    <form #childForm="ngForm" autocomplete="off" novalidate class="business-dept" (ngSubmit)="addInspectionDesc()">
      <div class="p-formgroup-inline">
        <div class="p-formgroup-inline">
          <div class="form-group">
            <!-- <div class="form-group">
              <label class="label-width" for="stageSign">*一级不良名称：</label>
              <input id="repairPartSelect" #repairPartInput="ngModel" name="repairPart" class="input-lable"
                [(ngModel)]="rolesId" required />
              <validation-messages [formCtrl]="repairPartInput"></validation-messages>
            </div> -->
            <label class="label-width" for="stageSign">*二级不良名称：</label>
            <input id="stageSign" #childNameInput="ngModel" name="childName" class="input-lable"
              [(ngModel)]="ngchildForm.itemName" required />
            <validation-messages [formCtrl]="childNameInput"></validation-messages>
          </div>

          <div class="form-group">
            <label class="label-width" for="isUsed">是否使用：</label>
            <p-inputSwitch name="parentChecked" #parentCheckedInput="ngModel" [(ngModel)]="ngchildForm.isUsed">
            </p-inputSwitch>

          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" [disabled]="!childForm.form.valid" [buttonBusy]="savingNgChildDia"
          [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i>
          <span>保存</span></button>
      </div>
    </form>

  </p-dialog>
</div>